<template>
  <div>
    <div class="card">
      <heard></heard>
      <div class="tu">
        <img src="../../assets/img/banner1.png" alt="" />
      </div>

      <div class="sp">
        <img src="../../assets/img/tita.png" alt="" />
      </div>
      <div class="xq">
        <ul>
          <li>
            <img src="../../assets/img/11.jpg" alt="" />
            <p>上海</p>
            <p>【早鸟提前10日可订】上海迪士尼一日早鸟套餐</p>
            <div>
              <span>¥358</span>
              <button>立即预定</button>
            </div>
          </li>
          <li>
            <img src="../../assets/img/12.jpg" alt="" />
            <p>上海</p>
            <p>【亲子主推】上海迪士尼一日票</p>
            <div>
              <span>¥358</span>
              <button>立即预定</button>
            </div>
          </li>
          <li>
            <img src="../../assets/img/13.jpg" alt="" />
            <p>上海</p>
            <p>【乐园美食餐券】迪士尼一日票+美食餐券</p>
            <div>
              <span>¥358</span>
              <button>立即预定</button>
            </div>
          </li>
          <li>
            <img src="../../assets/img/14.jpg" alt="" />
            <p>上海</p>
            <p>【两日畅游】迪士尼二日票</p>
            <div>
              <span>¥358</span>
              <button>立即预定</button>
            </div>
          </li>
        </ul>
      </div>
      <div class="dj">
        <img src="../../assets/img/titb.png" alt="" />
      </div>
      <div class="xq2">
        <ul>
          <li>
            <img src="../../assets/img/15.jpg" alt="" />
            <p>上海</p>
            <p>【早鸟提前10日可订】上海迪士尼一日早鸟套餐</p>
            <div>
              <span>¥358</span>
              <button>立即预定</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import heard from "@/components/contern/heard.vue";
export default {
  components: {
    heard,
  },
};
</script>

<style lang="scss" scoped>
.card {
  width: 100%;

  .tu {
    margin-top: 42px;
    width: 100%;
    height: 666px;
    > img {
      display: block;
      width: 100%;
      height: 666px;
    }
  }

  .sp {
    width: 100%;
    height: 55px;
    padding-top: 5px;
    background-color: #fff;
    > img {
      width: 361px;
      height: 46px;
    }
  }
  .xq {
    width: 100%;
    padding: 15px 0 15px 19px;
    background-color: #f9d6ae;
    ul {
      width: 351px;
      display: flex;
      flex-wrap: wrap;
      li:nth-child(2n + 1) {
        margin-right: 15px;
      }
      li {
        width: 160px;
        height: 200px;
        background-color: #fff;
        padding: 5px 5px;
        margin-bottom: 5px;
        position: relative;
        > img {
          width: 100%;
          height: 130px;
        }
        > p:nth-child(2) {
          width: 30px;
          position: absolute;
          top: 9px;
          left: 10px;
          background-color: #000;
          color: #fff;
          border-radius: 5px;
          padding-left: 2px;
        }
        > p:nth-child(3) {
          width: 134px;
          margin: 3px 0 2px 5px;
        }
        > div {
          height: 16px;
          margin-top: 6px;
          display: flex;
          justify-content: space-between;
          > span {
            padding: 2px;
            color: red;
            font-size: 16px;
          }
          > button {
            background-color: #f63459;
            color: #fff;
            height: 23px;
            border-radius: 5px;
          }
        }
      }
    }
  }
  .dj {
    width: 100%;
    height: 50px;
    padding-top: 5px;
    background-color: #fff;
    > img {
      width: 361px;
      height: 30px;
      margin-top: 5px;
    }
  }
  .xq2 {
    width: 100%;
    padding: 15px 0 15px 19px;
    background-color: #f9d6ae;
    ul {
      width: 351px;
      display: flex;
      flex-wrap: wrap;
      li:nth-child(2n + 1) {
        margin-right: 15px;
      }
      li {
        width: 160px;
        height: 200px;
        background-color: #fff;
        padding: 5px 5px;
        margin-bottom: 5px;
        position: relative;
        > img {
          width: 100%;
          height: 130px;
        }
        > p:nth-child(2) {
          width: 30px;
          position: absolute;
          top: 9px;
          left: 10px;
          background-color: #000;
          color: #fff;
          border-radius: 5px;
          padding-left: 2px;
        }
        > p:nth-child(3) {
          width: 134px;
          margin: 3px 0 2px 5px;
        }
        > div {
          height: 16px;
          margin-top: 6px;
          display: flex;
          justify-content: space-between;
          > span {
            padding: 2px;
            color: red;
            font-size: 16px;
          }
          > button {
            background-color: #f63459;
            color: #fff;
            height: 23px;
            border-radius: 5px;
          }
        }
      }
    }
  }
}
</style>
